<!DOCTYPE html>
<html style="height:100%;">
<head>
<title>Map View</title>
<meta name="viewport" content=" width=device-width, initial-scale=1, user-scalable=no"/>
<script type="text/javascript"
    src="http://maps.googleapis.com/maps/api/js?sensor=true">
</script>
<link rel="stylesheet" href="css/maps.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js"></script>
<script type="text/javascript">

var initialLocation;
var browserSupportFlag =  new Boolean();
var map;
var contentString = '<div id="content">'+
    '<div id="siteNotice">'+
    '</div>'+
    '<h5 id="firstHeading" class="firstHeading">Your Location</h5>'+
    '</div>';
	
var infowindow = new google.maps.InfoWindow({
	content: contentString
});

function detectBrowser(){
	var userAgent = navigator.userAgent;
	var mapdiv = document.getElementById('map_canvas');
	if (userAgent.indexOf('iPhone') != -1 || userAgent.indexOf('Android') != -1 ) {
		mapdiv.style.width = '100%';
		mapdiv.style.height = '100%';

	} else {	
		mapdiv.style.width = '100%';
		mapdiv.style.height = '100%';
	}
	
}

function initialize() {
	//var latlng = new google.maps.LatLng(-34.397, 150.644);
	detectBrowser();
	var myOptions = {
	  zoom: 18,
	  mapTypeId: google.maps.MapTypeId.ROADMAP,
	};
	
	var map = new google.maps.Map(document.getElementById("map_canvas"),
		myOptions);

	if(navigator.geolocation){
		browserSupportFlag = true;
		navigator.geolocation.getCurrentPosition(function(position){
			initialLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
			map.setCenter(initialLocation);
			
			var marker = new google.maps.Marker({
				position: initialLocation,
				map: map,
				title: "Your current location"
			});
			google.maps.event.addListener(marker, 'click', function() {
  				infowindow.open(map,marker);
			});
		}, function(){
			handleNoGeoLocation(browserSupportFlag);
		});
	}else {
	
    	browserSupportFlag = false;
    	handleNoGeolocation(browserSupportFlag);
  	}
	
	
	var locations = new Array();
	locations[0] =[-27.4952,153.0035];
	locations[1] =[-27.4977,153.0046];
	locations[2] =[-27.501,153.009];
	locations[3] =[-27.4970,153.0028];
	locations[4] =[-27.4965,153.0053];
	locations[5] =[-27.4945,153.0035];
	locations[6] =[-27.4965,153.0023];
	
	for(var x in locations){
		var point = new google.maps.LatLng(locations[x][0], locations[x][1]);
		var marker = new google.maps.Marker({
			position: point,
			map:map
		});
	}
	
}

function handleNoGeoLocation(errorFlag) {
    if (errorFlag == true) {
      alert("Geolocation service failed.");

    } else {
      alert("Your browser doesn't support geolocation.");

    }
    map.setCenter(initialLocation);
  }

$(document).ready(function(e) {
    initialize();
});
</script>
</head>

<body  style="height:100%; width:100% margin:0px 0px 0px 0px; padding:0px;">
<div id="page" data-role="page" class="page-map ui-page ui-body-c ui-page-active" data-external-page="true">
<div data-role="header"> <h3>Around You</h3><a data-rel="back" data-icon="back" data-icon="back">Back</a></div>

<div id='map_canvas'></div>


</div>

</body>
</html>